<template>
  <div>
    <el-dialog :title="!dataForm.id ? '参数新增' : '参数修改'" :close-on-click-modal="false" :visible.sync="visible" fullscreen
      center>
      <el-button class="miui-dialog-close-btn" @click="visible = false">关闭页面</el-button>
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="120px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="名称" prop="publicName">
              <el-input v-model="dataForm.publicName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="键" prop="publicKey">
              <el-input v-model="dataForm.publicKey"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="值" prop="publicValue">
              <el-input v-model="dataForm.publicValue"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="编码" prop="validateCode">
              <el-input v-model="dataForm.validateCode"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="字典类型" prop="system">
              <el-select clearable v-model="dataForm.system">
                <el-option v-for="item in dictType" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="状态" prop="status">
              <el-select clearable v-model="dataForm.status">
                <el-option value="0" label="正常"></el-option>
                <el-option value="1" label="冻结"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="参数类型" prop="publicType">
              <el-select clearable v-model="dataForm.publicType">
                <el-option v-for="item in paramType" :value="item.value" :label="item.label" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="查询类型" prop="linkType">
              <el-radio-group v-model="dataForm.linkType" @change="changeLinkType">
                <el-radio :label="1">部门</el-radio>
                <el-radio :label="2">单位</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
        <el-col :span="21">
          <el-form-item label="查询部门" v-if="dataForm.linkType == 1">
            <el-input type="textarea" v-model="dataForm.checkNames" disabled></el-input>
          </el-form-item>
          <el-form-item label="查询单位" v-if="dataForm.linkType == 2">
            <el-input type="textarea" v-model="dataForm.checkNames" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="3">
          <el-form-item label-width="0">
            <el-button size="mini" @click="openDeptDialog">选择</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dataFormSubmit" :loading="ischeck" v-prevent-re-click>保 存</el-button>
      </span>
      <!-- 弹窗，查询部门列表 -->
      <search-dept v-if="deptVisible" ref="deptDialog" @refreshData="getDeptData"></search-dept>
      <!-- 弹窗 单位列表 -->
    <search-unit v-if="unitVisible" ref="unitDialog" @refreshData="getDeptData"></search-unit>
    </el-dialog>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  import { remote } from '@/api/admin/dict'
  import { getObj, addObj, putObj } from '@/api/admin/sys-public-param'
  import SearchDept from '@/components/business/SearchDept'
  import SearchUnit from './SearchUnit'


  export default {
    data() {
      return {
        visible: false,
        ischeck: false,
        supplyVisible: false,
        saveHandle: false,
        deptVisible: false,
        unitVisible: false,
        dictType: [],
        paramType: [],
        dataForm: {
          publicId: 0,
          publicName: '',
          publicKey: '',
          publicValue: '',
          validateCode: '',
          system: '',
          publicType: '',
          status: '',
          linkType: 1,
          checkNames: '',
          linkIds: []
        },
        dataRule: {
          publicName: [{required: true,message: '参数名称不能为空',trigger: 'blur'}],
          publicKey: [{required: true,message: '键不能为空',trigger: 'blur'}],
          publicValue: [{required: true,message: '值不能为空',trigger: 'blur'}],
          system: [{required: true,message: '字典类型不能为空',trigger: 'blur'}],
          publicType: [{required: true,message: '参数类型不能为空',trigger: 'blur'}],
          status: [{required: true,message: '参数状态不能为空',trigger: 'blur'}],
        }
      }
    },
    computed: {
      ...mapGetters(['bizData'])
    },
    components: {
      SearchDept,
      SearchUnit
    },
    methods: {
      init(id){
        this.visible = true
        this.dataForm.publicId = id || 0
        if(this.dataForm.publicId == 0){
          for(let key in this.dataForm){
            if(key == 'linkType'){
              this.dataForm.linkType = 1
            }else{
              this.dataForm[key] = ''
            }
            
          }
          this.dataForm.linkIds = []
        }
        this.$nextTick(() => {
          remote('dict_type').then(result => {
            this.dictType = result.data.data
          })
          remote('param_type').then(result => {
            this.paramType = result.data.data
          })
          if(this.dataForm.publicId){
            getObj(this.dataForm.publicId).then(response => {
              this.dataForm = response.data.data
              this.dataForm.checkNames = this.dataForm.linkNames.join(',')
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit() {
        if(this.dataForm.linkIds.length >0){
          this.ischeck = true
          if (!this.saveHandle) {
            this.$refs['dataForm'].validate((valid) => {
              if (valid) {
                this.saveHandle = true
                if (this.dataForm.publicId) {
                  putObj(this.dataForm).then(data => {
                    this.$message.success('修改成功')
                    this.visible = false
                    this.saveHandle = false
                    this.$emit('refreshDataList')
                    setTimeout(() => {
                      this.ischeck = false
                    })
                  }).catch(() => {
                    this.ischeck = false
                  })
                } else {
                  addObj(this.dataForm).then(data => {
                    this.$message.success('添加成功')
                    this.visible = false
                    this.saveHandle = false
                    this.$emit('refreshDataList')
                    setTimeout(() => {
                      this.ischeck = false
                    })
                  }).catch(() => {
                    this.ischeck = false
                  })
                }
              } else {
                this.ischeck = false
              }
            })
          }
        }else{
          this.$message.warning("请选择关联部门/单位")
        }

      },
      //  打开查询部门/单位弹窗
      openDeptDialog() {
        if(this.dataForm.linkType == 1){
          this.deptVisible = true
          this.$nextTick(() => {
            this.$refs.deptDialog.init()
          })
        }else{
          this.unitVisible = true
          this.$nextTick(() => {
            this.$refs.unitDialog.init()
          })
        }
      },
      //  获取选择部门数据
      getDeptData(data) {
        console.log(data)
        let ids = []
        let names = []
        if (data.length) {
          data.forEach(item => {
            ids.push(item.id)
            names.push(item.name)
          })
        }
        this.$set(this.dataForm,'checkNames',names.join(','))
        this.dataForm.linkIds = ids
        this.dataForm = {...this.dataForm}
      },
      changeLinkType(){
        this.dataForm.checkNames = ''
        this.dataForm.linkIds = []
        this.dataForm = {...this.dataForm}
      }
    }
  }
</script>
